


Retro iMessage Skin

by Azdaema Codes (Azdaema)



Series: Azdaema's AO3 Messaging Skins [2]
Category: AO3 fandom, No Fandom
Genre: Ao3 skins, Fanwork Research & Reference Guides, Metafiction, Work Skin
Language: English
Status: Completed
Published: 2020-05-28
Updated: 2020-05-28
Packaged: 2021-03-02 22:27:58
Rating: Teen And Up Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 7
Words: 1,526
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24274318
Author URL: https://archiveofourown.org/users/Azdaema/pseuds/Azdaema%20Codes
Summary: iMessage as it looked up through iOS 6.
Relationships: AO3 Skins & You
Series: Azdaema's AO3 Messaging Skins [2]
Series URL: https://archiveofourown.org/series/1642099
Comments: 3
Kudos: 3





	1. Intro

Here's what this skin can do:

## Numerius Negidius

####  **Today** , 11:45 AM

Aulus
    Look what they're selling at the forum
    
    Do you want me to get you one??

Numerius
    YES
    💖
    youre the best

####  **Today** , 3:21 PM

Numerius
    okay listen but what if we MADE OUR OWN
     <https://www.youtube.com/watch?v=DdRrXZoQ8wo>

Aulus
    I mean I already bought them
    so

Numerius
    nvm then

``

The github page for it is [here](https://github.com/Azdaema/AO3-Skin_Messaging/tree/master/iMessage%20Retro).


	2. Basics

### Skin
    
    
    /* wrapper */
    .imessageorig {
    	width: 100%;
    	max-width: 320px;
    	display: table;
    	margin: auto;
    	background-color: #dbe2ed;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    /* characters's names hidden */
    .imessageorig dt {
    	display: none;
    }
    
    /* shared text features */
    .imessageorig .in dd,
    .imessageorig .out dd {
    	position: relative;
    	clear: both;
    	z-index: 1; /* so shine goes under bubble's text */
    	border-radius: 12px;
    	border: 1px solid rgba(0,0,0, 0.5);
    	box-shadow: 0 1px 2px rgba(0,0,0, 0.28);
    	padding: 6px 10px;
    	margin: 5px 10px;
    	max-width: 180px;
    	color: #000000;
    	line-height: 1.2em;
    	text-shadow: 0 1px 1px rgba(255,255,255, 0.6);
    }
    /* Shine at the top of texts */
    .imessageorig .in dd:before,
    .imessageorig .out dd:before {
    	content: "";
    	z-index: -1; /* so shine goes under bubble's text */
    	display: block;
    	position: absolute;
    	background: linear-gradient(rgba(255,255,255, 0.76), rgba(255,255,255, 0.25));
    	border-radius: 12px;
    	top: 0;
    	left: 10px;
    	right: 10px;
    	height: 12px;
    }
    
    /* Outgoing texts */
    .imessageorig .out dd {
    	float: right;
    	background: linear-gradient(to top, #d3f8ff 0%, #99c9ff 0.75em);
    	filter: hue-rotate(-10deg);
    }
    
    /* Incoming texts */
    .imessageorig .in dd {
    	float: left;
    	background: linear-gradient(to top, #f5f5f5 0%, #dddddd 0.75em);
    }

### Demo
    
    
    <dl class="imessageorig">
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    </dl>

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now


	3. Photos

### Skin
    
    
    .imessageorig dd.pic {
    	padding: 0;
    	overflow: hidden; /* curve corners */
    }
    .imessageorig .pic img {
    	width: 100%;
    	display: block; /* without "block" there's extra space after */
    }
    /* shine lays over picture */
    .imessageorig .in .pic:before,
    .imessageorig .out .pic:before {
    	z-index: 0; 
    }

### Demo
    
    
    <dl class="imessageorig">
    
    <div class="out">
    <dt>Aulus Agerius</dt>
    <dd>Look what they're selling at the forum</dd>
    <dd class="pic"><img src="https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/gladius.jpg" /></dd>
    </div>
    
    </dl>

Aulus Agerius
    Look what they're selling at the forum
    


	4. Timestamps

### Skin
    
    
    .imessageorig .time {
    	clear: both;
    	font-family: inherit;
    	font-weight: bold;
    	font-size: 0.75em;
    	color: #7c899a;
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.96);
    	margin: 0;
    	text-align: center;
    	padding: 5px 0;
    }

### Demo

I reccomend using `<h4>` and `<h5>` for the day, so then they'll look distinct in "Hide Creator's Style."
    
    
    <dl class="imessageorig">
    
    <h4 class="time"><b>Today</b>, 11:45 AM</h4>
    
    <div class="out">
    <dt>Alice</dt>
    <dd>Can we talk?</dd>
    </div>
    
    <h4 class="time"><b>Today</b>, 2:11 AM</h4>
    
    <div class="out">
    <dt>Alice</dt>
    <dd>I'm sorry</dd>
    <dd>I'm so sorry just please talk to me</dd>
    </div>
    
    </dl>

####  **Today** , 11:45 AM

Alice
    Can we talk?

####  **Today** , 2:11 AM

Alice
    I'm sorry
    I'm so sorry just please talk to me


	5. Group Texts

### Skin
    
    
    /* show the names with incoming texts for grouptext mode */
    .imessageorig.grouptext .in dt {
    	clear: both;
    	font-family: inherit;
    	font-weight: bold;
    	font-size: 0.75em;
    	color: #7c899a;
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.96);
    	margin: 0;
    	padding-left: 15px;
    	padding-top: 10px;
    	display: table !important;
    }

### Demo

You have to add it to the wrapper:
    
    
    <dl class="imessageorig grouptext">
    
    <div class="out">
    <dt>Ciri</dt>
    <dd>Who's picking me up today?</dd>
    </div>
    
    <div class="in">
    <dt>Yennefer</dt>
    <dd>its tuesday</dd>
    <dd>so jaskier</dd>
    </div>
    
    <div class="in">
    <dt>Jaskier</dt>
    <dd>no its geralts turn</dd>
    <dd>i swear its his turn</dd>
    </div>
    
    <div class="in">
    <dt>Geralt</dt>
    <dd>no, Yen is right: it's your turn</dd>
    <dd>it's tuesday</dd>
    <dd>Tuesday is always your turn</dd>
    </div>
    
    <div class="in">
    <dt>Jaskier</dt>
    <dd>shit</dd>
    </div>
    
    <div class="in">
    <dt>Yennefer</dt>
    <dd>told you</dd>
    </div>
    
    <div class="in">
    <dt>Jaskier</dt>
    <dd>Ciri i'm so sorry</dd>
    <dd>I'll be there as soon as I can</dd>
    </div>
    
    <div class="out">
    <dt>Ciri</dt>
    <dd>Can I just go over to Dara's today?</dd>
    </div>
    
    </dl>

Ciri
    Who's picking me up today?

Yennefer
    Its tuesday so jaskier

Jaskier
    no its geralts turn
    i swear its his turn

Geralt
    no, Yen is right: it's your turn
    it's tuesday
    Tuesday is always your turn

Jaskier
    shit

Yennefer
    Told you

Jaskier
    Ciri i'm so sorry
    I'll be there as soon as I can

Ciri
    Can I just go over to Dara's today?


	6. SMS

### Skin
    
    
    /* Green outgoing texts */
    .imessageorig.sms .out dd,
    .imessageorig .out.sms dd {
    	background: linear-gradient(to top, #e7f585 0%, #8fd13e 0.75em);
    }

### Demo

You can do it for the whole set:
    
    
    <dl class="imessageorig sms">
    <div class="out">
    <dt>Bob</dt>
    <dd>Leaving now</dd>
    </div>
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    </dl>

Bob
    Leaving now

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now

Or just individual texts:
    
    
    <dl class="imessageorig">
    <div class="out sms">
    <dt>Bob</dt>
    <dd>Leaving now</dd>
    </div>
    
    <div class="in">
    <dt>Alice</dt>
    <dd>are you there yet?</dd>
    <dd>Where are you?</dd>
    </div>
    
    <div class="out">
    <dt>Bob</dt>
    <dd>I'm waiting outside</dd>
    <dd>wait I can see you now</dd>
    </div>
    
    </dl>

Bob
    Leaving now

Alice
    are you there yet?
    Where are you?

Bob
    I'm waiting outside
    wait I can see you now


	7. Header + Footer

### Skin
    
    
    /**************************************************
    *		Contact header
    **************************************************/
    .imessageorig .contact {
    	position: relative;
    	background: linear-gradient(to bottom, #b2bdcc, #8a9cb4 50%, #7c91ad 50%, #6e85a3);
    	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    	margin: 0;
    	padding: 12px;
    	font-size: 18px;
    	font-family: inherit;
    	color: #ffffff;
    	font-weight: bold;
    	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.53);
    	text-align: center;
    	padding-left: 90px;
    	padding-right: 75px;
    	max-width: 155px;
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    }
    
    /* buttons */
    .imessageorig .contact:before,
    .imessageorig .contact:after {
    	position: absolute;
    	top: 5px;
    	bottom: 5px;
    	min-width: 40px;
    	border-radius: 6px; 
    	background: linear-gradient(to bottom, #7f99b9, #5c7ba5 50%, #486a9b 51%, #496c9b);
    	box-shadow: inset 0 1px 0 rgba(0,0,0, 0.28), 0 1px 0 rgba(255,255,255, 0.12);
    	border: 1px solid rgba(0,0,0, 0.39);
    	padding: 10px;
    	font-size: 12px;
    	text-shadow: 0 -1px 1px rgba(0,0,0, 0.5);
    }
    .imessageorig .contact:before {
    	content: "Messages";
    	left: 5px;
    }
    .imessageorig .contact:after {
    	content: "Edit";
    	right: 5px;
    }
    
    
    /**************************************************
    *		Footer
    **************************************************/
    .imessageorig .footer {
    	display: table;
    	position: relative;
    	clear: both;
    	width: 100%;
    	background: linear-gradient(to top, #c5c7cb, #fafbfb);
    	border: 1px solid rgba(0, 0, 0, 0.15);
    	box-sizing: border-box;
    }
    
    /* camera */
    .imessageorig .footer:before,
    .imessageorig .footer:after {
    	position: absolute;
    	bottom: 5px;
    	border-radius: 1em;
    	border: 1px solid rgba(0, 0, 0, 0.28);
    	border-top-style: none;
    	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.41), 0 1px 1px rgba(255, 255, 255, 0.38);
    }
    
    .imessageorig .footer:after {
    	content: "Send";
    	right: 0.25em;
    	padding: 2px 0.5em;
    	font-weight: bold;
    	color: #ffffff;
    	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.54);
    	background: linear-gradient(to bottom, #86c0e8 0%, #096fba 50%);
    }
    
    .imessageorig.sms .footer:after {
    	background: linear-gradient(to bottom, #abd06f 0%, #6eaf35 50%, #59a21e 50%);
    }
    
    .imessageorig .footer:before {
    	content: "";
    	left: 0.25em;
    	padding: 0.25em;
    	width: 1em;
    	height: 1em;
    	background: url("https://raw.githubusercontent.com/Azdaema/AO3-Skin_Messaging/master/FontAwesome/white/fa-camera.png") no-repeat center, linear-gradient(to bottom, #a5b0b6 30%, #727b87 50%, #5a6d7c 55%);
    	background-size: 0.9em auto, auto;
    	background-position: center;
    }
    
    /* type bar */
    .imessageorig .footer .typebar {
    	display: block;
    	margin: 5px;
    	padding: 2px 10px;
    	margin-left: 2.15em;
    	margin-right: 4em;
    	border-radius: 12px;
    	background: #FFFFFF;
    	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.71), inset -1px 2px 6px rgba(0, 0, 0, 0.41);
    	border: 1px solid rgba(0, 0, 0, 0.59);
    	word-wrap: break-word;
    	white-space: pre-wrap;
    	font-family: inherit;
    	font-size: inherit;
    }
    
    /* blue cursor */
    .imessageorig .footer .typebar:after{
    	content: "";
    	border-right: 2px solid #2860ee;
    }

### Demo

I recommend using `<h1>` or `<h2>` for the header, so it'll look distinct in "Hide Creator's Style."

You can have an unsent text in the typing bar:
    
    
    <dl class="imessageorig border">
    <h1 class="contact">Your platonic friend</h1>
    
    <h4 class="time">
    <b>Today</b>, 8:21 PM</h4>
    
    <div class="in">
    <dt>Friend</dt>
    <dd>I'm leaving for my date now, wish me luck!</dd>
    </div>
    
    <div class="footer">
    <span class="typebar">I'm in love with you</span>
    </div>
    </dl>

# Your platonic friend

####  **Today** , 8:21 PM

Friend
    I'm leaving for my date now, wish me luck!

I'm in love with you

Or it can be empty, and only be there for the Complete Look™:
    
    
    <dl class="imessageorig border">
    <h1 class="contact">Your platonic friend</h1>
    
    <h4 class="time">
    <b>Today</b>, 8:21 PM</h4>
    
    <div class="in">
    <dt>Friend</dt>
    <dd>I'm leaving for my date now, wish me luck!</dd>
    </div>
    
    <div class="footer">
    <span class="typebar"></span>
    </div>
    </dl>

# Your platonic friend

####  **Today** , 8:21 PM

Friend
    I'm leaving for my date now, wish me luck!


End file.
